@use 'utils/mixins';
@use 'utils/variables';

.TeamIcon__content {
    display: flex;
    overflow: hidden;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.25s ease;

    &.no-hover {
        transition: none;
    }
}

.TeamIcon__initials {
    font-family: Metropolis, sans-serif;
    letter-spacing: 0.02em;
    user-select: none;

    &.TeamIcon__initials__lg {
        font-size: 3em;
    }

    &.TeamIcon__initials__sm {
        font-size: 14px;
    }
}

.TeamIcon {
    position: relative;
    width: 34px;
    height: 34px;
    box-sizing: content-box;
    border: 3px solid rgba(255, 255, 255, 0);
    border-radius: 8px;
    background-color: rgba(var(--sidebar-text-rgb), 0.16);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    transform-origin: center center;
    transition: box-shadow 0.3s, background-color 0.3s, border-color 0.3s;
    will-change: box-shadow, background-color, border-color;

    &:not(.no-hover):hover {
        border-color: var(--sidebar-teambar-bg);
        background-color: rgba(var(--sidebar-text-rgb), 0.3);
        box-shadow: 0 0 0 3px rgba(var(--sidebar-text-rgb), 0.3);
    }

    &:active {
        border-color: var(--sidebar-teambar-bg);
        box-shadow: 0 0 0 3px var(--sidebar-text-active-border);
    }

    &.active {
        border-color: var(--sidebar-teambar-bg);
        background-color: rgba(var(--sidebar-text-rgb), 0.3);
        box-shadow: 0 0 0 3px var(--sidebar-text-active-border);
    }

    &.TeamIcon__lg {
        width: 94px;
        height: 94px;
    }

    &.TeamIcon__sm {
        width: 34px;
        height: 34px;
    }

    &.TeamIcon__xsm {
        width: 32px;
        height: 32px;
    }

    &.TeamIcon__xxs {
        width: 26px;
        height: 26px;
    }

    &.withImage {
        border: none;

        &.TeamIcon__lg {
            width: 100px;
            height: 100px;
        }

        &.TeamIcon__sm {
            width: 40px;
            height: 40px;
        }

        &.TeamIcon__xsm {
            width: 32px;
            height: 32px;
        }

        &.TeamIcon__xxs {
            width: 26px;
            height: 26px;
        }

        .TeamIcon__image {
            border-radius: 8px;
            transition: box-shadow 200ms;
        }

        &:not(.no-hover):hover {
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.32);

            .TeamIcon__image {
                box-shadow: inset 0 0 0 3px var(--sidebar-teambar-bg);
            }
        }
    }

    &.withImage.active {
        box-shadow: 0 0 0 3px rgba(var(--sidebar-text-active-border-rgb), 0.75);

        .TeamIcon__image {
            box-shadow: inset 0 0 0 3px var(--sidebar-teambar-bg);
        }
    }

    .TeamIcon__image {
        @include mixins.clearfix;

        width: 100%;
        height: 100%;
        background-color: variables.$white;
        background-repeat: unset;
        background-size: 100% 100%;
    }
}
